<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table {
        width: 400px;
        border: 1px solid #000;
        border-collapse: collapse;
        margin: 0 auto;
    }

    td,
    th {
        border: 1px solid #000;
        text-align: center;
    }

    input {
        width: 50px;
    }

    .search {
        width: 600px;
        margin: 20px auto;
    }
</style>
<body>
<div class="search">
    按照价格查询: <input class="start" type="number"> - <input class="end" type="number">
    <button class="search-price">搜索</button>
    按照商品名称查询: <input class="product" type="text">
    <button class="search-pro">查询</button>
</div>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>产品名称</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
    // 利用新增数组方法操作数据
    const data = [{
        id: 1,
        pName: '小米',
        price: 3999
    }, {
        id: 2,
        pName: 'oppo',
        price: 999
    }, {
        id: 3,
        pName: '荣耀',
        price: 1299
    }, {
        id: 4,
        pName: '华为',
        price: 1999
    },];
    // 1. 获取相应的元素
    let tbody = document.querySelector('tbody');
    let search_price = document.querySelector('.search-price');
    let start = document.querySelector('.start');
    let end = document.querySelector('.end');
    let product = document.querySelector('.product');
    let search_pro = document.querySelector('.search-pro');


    // 2.渲染数据
    generateData(data);


    // 3.商品查询
    search_pro.addEventListener('click', (e) => {
        if (product.value !== '') {
            let newData = data.filter((value) => value.pName === product.value);
            generateData(newData);
        } else {
            generateData(data);
        }
    })

    product.addEventListener('keyup', (e) => {
        if (e.keyCode === 13) {
            // 直接手动点击 按钮!!!
            search_pro.click();
        }
    })

    product.addEventListener('blur', (e) => {
        // 直接手动点击 按钮!!!
        search_pro.click();
    })


    search_price.addEventListener('click', () => {
        let startPrice = start.value === '' ? 0 : parseInt(start.value);
        let endPrice = end.value === '' ? Number.MAX_VALUE : parseInt(end.value);

        let newData = data.filter((value) => value.price >= startPrice && value.price <= endPrice);
        generateData(newData);
    })

    start.addEventListener('keyup', (e) => {

    })
    start.addEventListener('blur', (e) => {
        // 直接手动点击 按钮!!!
        search_price.click();
    })
    end.addEventListener('keyup', (e) => {
        if (e.keyCode === 13) {
            // 直接手动点击 按钮!!!
            search_price.click();
        }
    })
    end.addEventListener('blur', (e) => {
        // 直接手动点击 按钮!!!
        search_price.click();
    })

    function generateData(arr) {
        if (tbody.children.length > 0) {
            // 删除tbody中所有内容, 直接用这种方式快捷
            tbody.innerHTML = '';
        }
        arr.forEach((value) => {
            let tr = document.createElement('tr');
            for (let valueKey in value) {
                let td = document.createElement('td');
                td.innerHTML = value[valueKey]
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        })
    }


</script>
</body>
</html>
